<template>
  <div class="appearance-panel">
    <div class="appearance-item">
      <div class="header">主题</div>
      <div class="content">
        <div @click="clickTheme(theme)" class="theme" :class="{selected : theme.selected}" v-for="theme in themes" :key="theme.value">
          <component :is="theme.component" />
          <span>{{theme.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, shallowRef, watchEffect, type Component } from 'vue';
import Sun from './Sun.vue';
import Moon from './Moon.vue';
import { useConfigStore } from '@/stores/configs/config';
import type { ThemeType } from '@/stores/configs/types';
import { storeToRefs } from 'pinia';
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
type ThemeItem = {
  name: string;
  value: string;
  component: Component;
  selected: boolean;
}
const themes = ref<ThemeItem[]>([
  {name : '浅色' , value : 'light' , component : shallowRef(Sun) , selected: true},
  {name : '深色' , value : 'dark' , component : shallowRef(Moon) , selected : false}
]);
const clickTheme = (theme: ThemeItem) => {
  themes.value.forEach(item => {
    item.selected = false;
  })
  theme.selected = true;
  configStore.updateTheme(theme.value as ThemeType);
}
watchEffect(() => {
  themes.value.forEach(item => {
    item.selected = false;
    if (item.value === config.value.app.theme) {
      item.selected = true;
    }
  });
})
</script>

<style lang='less' scoped>
.appearance-panel {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  gap: 0.16rem;
  .appearance-item {
    display: flex;
    flex-flow: column;
    .header {
      margin-bottom: 0.1rem;
      height: 0.32rem;
      line-height: 0.32rem;
      display: flex;
      align-items: center;
      font-size: var(--font-size-medium);
      font-weight: 500;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 0.24rem;
      .theme {
        flex: 1;
        border-radius: var(--radius);
        display: flex;
        flex-flow: column;
        gap: 0.1rem;
        align-items: center;
        justify-content: center;
        padding: 0.16rem;
        cursor: pointer;
        transition: all 0.3s;
        .useTheme({
          background-color: border-color;
        });
        &:hover {
          .useTheme({
            background-color: primary-color;
            color: white-color;
          } , 0.8)
        }
        &.selected {
          .useTheme({
            background-color: primary-color;
            color: white-color;
          });
        }
      }
    }
  }
}
</style>